<template>
    <div>
        <div class="ef-node-form">
            <div class="ef-node-form-header">
                编辑
            </div>
            <div class="ef-node-form-body">
                <el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
					<el-card class="box-card" v-for="(fg,fgix) in fieldGroups" style="margin:12px 0; margin-left:5px;" >
					  <div slot="header" class="clearfix">
					    <span>{{fg.name}}</span>
						<!--
					    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
						-->
					  </div>
					  
					  <el-form-item  v-for="(fie,fieix) in fg.getFields()" v-if="fie" :label="fie.name">
						  <template v-if = "fie.fieldValue.type =='TEXT'">
							  <el-input  v-model="nodeTempData[fie.code]" :placeholder="fie.fieldValue.defaultValue"></el-input>
							  <div style="">{{fie.fieldValue.comment}}</div>
						  </template>
					      <template v-if = "fie.fieldValue.type =='LABEL' || !fie.fieldValue.type">
					      		 {{fie.fieldValue.value || fie.fieldValue.defaultValue || fie.fieldValue.comment}}
					      </template>
						  <template v-if = "fie.fieldValue.type =='TEXT_LIST'">
								  <el-select v-model="nodeTempData[fie.code]" placeholder="请选择">
									  <el-option
											  v-for="item in fie.fieldValue.valueInfo"
											  :key="item.code"
											  :label="item.name"
											  :value="item.name">
									  </el-option>
								  </el-select>
						  </template>
					  </el-form-item>
					  
					</el-card>
                    
                    <el-form-item>
                        <el-button icon="el-icon-close">重置</el-button>
                        <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
                    </el-form-item>
                </el-form>

                <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
					<el-card class="box-card" v-for="(fg,fgix) in fieldGroups" style="margin:12px 0; margin-left:5px;" >
						  <div slot="header" class="clearfix">
						    <span>{{fg.name}}</span>
							<!--
						    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
							-->
						  </div>
						  
						  <el-form-item  v-for="(fie,fieix) in fg.getFields()" v-if="fie" :label="fie.name">
							  <template v-if = "fie.fieldValue.type =='TEXT'">
								  <el-input  v-model="nodeTempData[fie.code]" :placeholder="fie.fieldValue.defaultValue"></el-input>
								  <div style="">{{fie.fieldValue.comment}}</div>
							  </template>
						      <template v-if = "fie.fieldValue.type =='LABEL' || !fie.fieldValue.type">
						      		 {{fie.fieldValue.defaultValue || fie.fieldValue.comment}}
						      </template>
							  <template v-if = "fie.fieldValue.type =='TEXT_LIST'">
									  <el-select v-model="nodeTempData[fie.code]" placeholder="请选择">
										  <el-option
												  v-for="item in fie.fieldValue.valueInfo"
												  :key="item.code"
												  :label="item.name"
												  :value="item.name">
										  </el-option>
									  </el-select>
							  </template>
						  </el-form-item>
						  
						</el-card>
					    
					    <el-form-item>
					        <el-button icon="el-icon-close">重置</el-button>
					        <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
					    </el-form-item>
					</el-form>
					
					
					
                    
                </el-form>
            </div>
            <!--            <div class="el-node-form-tag"></div>-->
        </div>
    </div>

</template>

<script>
    import { cloneDeep } from 'lodash'

    export default {
        data() {
            return {
                visible: true,
                // node 或 line
                type: 'node',
                node: {},
				nodeTempData:{},
                line: {},
				fieldGroups:[],
                
                stateList: [{
                    state: 'success',
                    label: '成功'
                }, {
                    state: 'warning',
                    label: '警告'
                }, {
                    state: 'error',
                    label: '错误'
                }, {
                    state: 'running',
                    label: '运行中'
                }]
            }
        },
        methods: {
            /**
             * 表单修改，这里可以根据传入的ID进行业务信息获取
             * @param data
             * @param id
             */
            nodeInit(node) {
                this.type = 'node';
                this.node = node;
				let fieldGroups = node.getAllField();
				this.nodeTempData = {};
				let ntData = {};
				for(let fg of fieldGroups){
					for(let ff of fg.getFields()){
						if(ff.code){
							ntData[ff.code] = ff.value;
						}
					}
				}
				this.fieldGroups = fieldGroups;
				this.nodeTempData  = ntData;
            },
            lineInit(line) {
                this.type = 'line'
                this.line = line
				let fieldGroups = line.getAllField();
				this.nodeTempData = {};
				let ntData = {};
				for(let fg of fieldGroups){
					for(let ff of fg.getFields()){
						if(ff.code){
							ntData[ff.code] = ff.value;
						}
					}
				}
				this.fieldGroups = fieldGroups;
				this.nodeTempData  = ntData;
				
            },
            // 修改连线
            saveLine() {
				for(let key in this.nodeTempData){
					this.line.setFieldValue(key,this.nodeTempData[key]);
				}
                this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
            },
            save() {
                // this.data.nodeList.filter((node) => {
                //     if (node.id === this.node.id) {
                //         node.name = this.node.name
                //         node.left = this.node.left
                //         node.top = this.node.top
                //         node.ico = this.node.ico
                //         node.state = this.node.state
                //         this.$emit('repaintEverything')
                //     }
                // })
				
				for(let key in this.nodeTempData){
					this.node.setFieldValue(key,this.nodeTempData[key]);
				}
				this.$emit('repaintEverything',this.node)
				
            }
        }
    }
</script>

<style>
    .el-node-form-tag {
        position: absolute;
        top: 50%;
        margin-left: -15px;
        height: 40px;
        width: 15px;
        background-color: #fbfbfb;
        border: 1px solid rgb(220, 227, 232);
        border-right: none;
        z-index: 0;
    }
</style>
